<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DIV渲染带白色环的圆点</title>
  <style>
    body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.container {
  position: relative;
  width: 90%; /* 父容器宽度 */
  max-width: 800px; /* 最大宽度 */
  aspect-ratio: 2 / 1; /* 宽高比固定为 2:1 */
}

.line {
  width: 100%; /* SVG 宽度 */
  height: 100%; /* SVG 高度 */
}

/* 圆点样式 */
.dot {
  position: absolute;
  width: 14px; /* 圆点直径 */
  height: 14px;
  border: 3px solid white; /* 空心圆环 */
  border-radius: 50%;
  background-color: green; /* 默认颜色 */
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background-color 0.3s ease;
}

.dot:hover {
  background-color: yellow; /* 鼠标悬停 */
}

/* 文字标签样式 */
.label {
  position: absolute;
  font-size: 12px;
  transform: translate(-40%, 20px);
  color: black;
  white-space: nowrap;
  background-color: #fff;
  padding: 5px;
  border-radius: 5px;
}

  </style>
</head>
<body>
  <div class="container">
    <!-- SVG 路径 -->
    <svg class="line" viewBox="0 0 600 300" preserveAspectRatio="xMidYMid meet">
      <defs>
        <marker
          id="arrow"
          markerWidth="10"
          markerHeight="10"
          refX="5"
          refY="5"
          orient="auto"
          markerUnits="strokeWidth"
        >
          <path d="M0,0 L10,5 L0,10 Z" fill="#1989f9" />
        </marker>
      </defs>
      <path
        id="path"
        d="M50,50 H450 C520,50 520,150 450,150 H100 C30,150 30,250 100,250 H500"
        stroke="#1989f9"
        fill="transparent"
        stroke-width="2"
        marker-end="url(#arrow)"
      />
    </svg>

    <!-- 动态插入的圆点和文字标签 -->
  </div>
  <script>
   // 获取 SVG 路径及容器
const path = document.getElementById("path");
const container = document.querySelector(".container");

// 路径上的文字标签及颜色
const labels = ["云龙机场", "美酒DIY", "乾坤酒堡", "国宝窖池", "终点站","国宝窖池","国宝窖池"];
const colors = ["#0ead57"];

// 根据路径计算点的位置
function createDots() {
  const pathLength = path.getTotalLength(); // 获取路径总长度
  const svgWidth = 600; // 设计宽度,根据svg元素的 viewBox 配置
  const svgHeight = 300; // 设计高度

  labels.forEach((label, index) => {
    // 获取点在路径上的位置
    const position = path.getPointAtLength((pathLength * index) / (labels.length - 1));
    const x = position.x;
    const y = position.y;

    // 创建圆点元素
    const dot = document.createElement("div");
    dot.className = "dot";
    let offsetLeft=(x / svgWidth) * 100
    if(index===0){offsetLeft=(x / svgWidth) * 100+5}
    if(index===labels.length-1){offsetLeft=(x / svgWidth) * 100-5}

    dot.style.left = `${offsetLeft}%`;
    dot.style.top = `${(y / svgHeight) * 100}%`;
    dot.style.backgroundColor = colors[0];

    // 点击事件：改变圆点颜色
    dot.addEventListener("click", () => {
      const nextColor = colors[Math.floor(Math.random() * colors.length)];
      dot.style.backgroundColor = nextColor;
      alert(`你点击了: ${label}`);
    });

    // 创建文字标签
    const labelDiv = document.createElement("div");
    labelDiv.className = "label";
    labelDiv.textContent = label;

    // 添加到容器
    dot.appendChild(labelDiv);
    container.appendChild(dot);
  });
}

// 初始化
createDots();

  </script>
</body>
</html>
